<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
      *{
        padding: 0;
        margin: 0;
    }
     table{
            width: 700px;
            margin: 50px;
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center;
        }
        caption{
            font-size: 20px;
            font-weight: bold;
            line-height: 60px;
        }
        th{
            border: 1px solid #000;
            padding: 10px 0;
            background-color: rgba(128, 128, 128, 0.425);
        }
        td{
           border: 1px solid #000;
            padding: 10px 0; 
        } 
</style>
<body>
     <table>
             <caption>学生表格</caption>
         <tr>
             <th>序号</th>
             <th>姓名</th>
             <th>年龄</th>
             <th>性别</th>
             <th>家乡</th>
         </tr>
    <script>
        // let obj = {
        //     name :'张三',
        //     sayHi:function(){
        //         document.write('hi~~')
        //     }
        // }
        // obj.sayHi()

        let students = [
                {name: '小明', age: 18, gender: '男', hometown: '河北省'},
                {name: '小红', age: 19, gender: '女', hometown: '河南省'},
                {name: '小刚', age: 17, gender: '男', hometown: ' 山西省'},
                {name: '小丽', age: 18, gender: '女', hometown: ' 山东省'}
            ]
            // let obj = students[i]
            // let str
            for(let j=0;j<students.length;j++){
                let obj = students[j]
        //         let str=`<table>
        //     <caption>学生表格</caption>
        //  <tr>
        //      <th>序号</th>
        //      <th>姓名</th>
        //      <th>年龄</th>
        //      <th>性别</th>
        //      <th>家乡</th>
        //  </tr>
         let str=`<tr>
             <td>${j+1}</td>
             <td>${obj.name}</td>
             <td>${obj.age}</td>
             <td>${obj.gender}</td>
             <td>${obj.hometown}</td>
         </tr>`
          document.write(str)
            }
            // document.write(str)
    </script>
    </table>
    <!-- <div>
        <table>
            <caption>学生表格</caption>
         <tr>
             <th>序号</th>
             <th>姓名</th>
             <th>年龄</th>
             <th>性别</th>
             <th>家乡</th>
         </tr>
         <tr>
             <td>1</td>
             <td>小明</td>
             <td>18</td>
             <td>男</td>
             <td>河北省</td>
         </tr>    
        </table> -->

    </div>
</body>
</html>